<template>
	<view class="bookDetalis">
		<toSafe :bgColor="'#F5DCAA'"></toSafe>
		<uni-nav-bar 
			@clickLeft="HandleLeft" 
			color="#111" 
			:fixed="true" 
			leftIcon="left" 
			:border="false" 
			backgroundColor="#F5DCAA" 
			:title="''"
			id="navbar"
			>
			<block #right>
				<view class="query-directory" @click="queryDirectory">
					目录
				</view>
			</block>
		</uni-nav-bar>
		
			<scroll-view
				class="content" 
				:style="{'height': scrollHeight + 'px'}" 
				:scroll-y="true" 
				lower-threshold="50"
				upper-threshold="0"
				@scrolltolower="loadMore"
				@scrolltoupper="loadMoreUp"
				@scroll="scroll"
				>
				<block 
					v-for="(item, index) in readTexts" 
					:key="index">
					<view class="readytext">
						<rich-text :nodes="item"></rich-text>
					</view>
				</block>
				<view class="loading" v-if="isLoading">{{loadingtext}}</view>
			</scroll-view>
			
			<!-- <swiper class="swiper-vertical"
				:indicator-dots="false"
				:vertical="true"
				:autoplay="false"
				duration="500"
				:current="currentIndex"
				@change="changeNever"
				>
				<swiper-item v-for="(item, index) in readTexts" :key="index">
					<view class="readytext">
						<rich-text :nodes="item"></rich-text>
					</view>
				</swiper-item>
			</swiper> -->
		<!-- <view 
			class="content" 
			@touchstart="touchStart" 
			@touchend="touchEnd"
			:style="{'height': scrollHeight + 'px'}"
		>
			<block
				v-for="(item, index) in readTexts" 
				:key="index">
				<view class="readytext">
					<rich-text :nodes="item"></rich-text>
				</view>
			</block>
			<view class="loading" v-if="isLoading">{{loadingtext}}</view>
		</view> -->
		
		<view class="page-info" id="page-info">
			<text>{{page}}</text>
			<text style="margin: 0 10rpx;">/</text>
			<text>{{numPage}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		readBooks
	} from '@/api/Novel.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {getElementHeight} from '@/utils/common.js'
	import toSafe from '@/compoents/top-safe.vue'
	let bookId = ref(''),
		readTexts = ref([]),
		isLoading = ref(false),
		loadingtext = ref('loading。。。'),
		numPage = ref(0),
		page = ref(1),
		minPage = ref(1),
		refreshing = ref(false);
	onLoad((e) => {
		bookId.value = e.id
		if(e.pages) {
			numPage.value = e.pages
			
		}
		if(e.page) {
			page.value = e.page;
			minPage.value = e.page;
		}
		getReadyContent();
		
	})
	
	const changeNever = (e) => {
		let current = e.detail.current;
		currentIndex.value = current;
		console.log(current, currentPage);
		if(current == (currentPage-3)) {
			getReadyContent();
		}
		
	}
	
	// 给个往上还是向下的标识
	let loadType = "down";
	const loadMore = () => {
		if(page.value >= numPage.value) {
			loadingtext.value = "nomore";
			return;
		}
		loadType = "down";
		page.value ++;
		getReadyContent();
	}
	const loadMoreUp = () => {
		console.log("up")
		if(minPage.value !== 1) {
			minPage.value --;
			loadType = "up";
			
			getReadyContent();
		}
	}
		
		let startY = 0, endY = 0;
		const touchStart=(event) => {
	      startY = event.touches[0].pageY;
	    }
	    const touchEnd = (event) => {
	      endY = event.changedTouches[0].pageY;
	      if (endY - startY > 0) { // 向下滑动
	        console.log('从上往下滑动');
	      }
	    }
	
		const onRefresherPull= () => {
	      // 用户下拉时触发
	      console.log('下拉刷新');
	    }
	    const onRefresherRefresh = () => {
	      // 当用户的下拉操作超过阈值时触发
	      console.log('准备刷新');
	      refreshing.value = true;
	      // 执行数据更新操作
	      setTimeout(() => {
	        refreshing.value = false;
	      }, 2000);
	    }
	    const onRefresherRestore = () => {
	      // 刷新UI状态恢复
	      console.log('刷新UI状态恢复');
	    }
	    const onRefresherAbort = () => {
	      // 用户停止下拉操作
	      console.log('用户停止下拉操作');
	    }
	
	const scroll = (e) => {
		console.log(e)
	}
	
	const getReadyContent = async()=> {
		isLoading.value = true;
		let pagesize = page.value;
		if(loadType == 'down') {
			pagesize = page.value;
		} else {
			pagesize = minPage.value;
		}
		let res = await readBooks({page: pagesize, novelId: bookId.value});
		if(res.data) {
			isLoading.value = false;
			if(loadType == 'down') {
				readTexts.value.push(res.data);
			} else {
				readTexts.value.unshift(res.data);
			}
		} else {
			loadingtext.value = "nomore";
		}
	}
	
	
	const HandleLeft = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const queryDirectory = () => {
		uni.navigateTo({
			url: `/pages/Directory/Directory?bookId=${bookId.value}&pages=${numPage.value}`
		})
	}
	let scrollHeight = ref(0);
	onMounted(() => {
		let safeHeight = 0, systemHieght = 0;
		const systemInfo = uni.getSystemInfoSync();
		safeHeight = systemInfo.safeAreaInsets.top;
		systemHieght = systemInfo.safeArea.height;
		getViewHeight(systemHieght - safeHeight);
	})
	const getViewHeight = (systemHieght) => {
		Promise.all([getElementHeight(this, '#navbar'),getElementHeight(this, '#page-info')])
		.then(([navHeight, pageHeight]) => {
			console.log(navHeight, pageHeight)
			scrollHeight.value = systemHieght - (navHeight + pageHeight);
		})
	};
	
</script>

<style lang="less" scoped>
	@interval: {
		letter-spacing: 2rpx;
	}

	@border: 1rpx solid #e8e3e3;
	.bookDetalis {
		width: 100%;
		height: 100vh;
		background: #FBE9CA;
	}
	.query-directory {
		color: #e5353f;
		text-align: right;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		opacity: 0.9;
		border: 2rpx solid #e5353f;
		padding: 8rpx 15rpx;
		border-radius: 20rpx;
	}
	.content {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		.readytext {
			color: #000000;
			font-family: "PingFang SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 60rpx;
		}
	}
	.loading {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
	.page-info {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		opacity: 0.5;
		display: flex;
		left: 0;
		bottom: 0;
		padding: 20rpx 28rpx;
	}
</style>